<template>
  <view class="message-wrap">
		<view class="search-wrap">聊天列表</view>
		<view class="msg-list">
			<scroll-view scroll-y class="scrol-wrap">
				<view class="msg-item" v-for="(item, index) in messageList" :key="index" @click="handleChat(item)">
					<image class="avatar" :src="item.targetPhoto ? item.targetPhoto : desc"></image>
					<view class="msg-info">
						<view class="name-wrap">
							<view class="name">{{item.targetName ? item.targetName : 'admin'}}</view>
							<view class="time">{{formatTimeFuc(item.time)}}</view>
						</view>
						<view class="msg" v-if="item.type==='text'">{{item.content}}</view>
						<view class="msg" v-if="item.type==='img'">[图片]</view>
						<view class="msg" v-if="item.type==='audio'">[语音消息]</view>
					</view>
					<view class="un-read" v-if="item.unread"></view>
				</view>
			</scroll-view>
		</view>
		<empty v-if="!messageList.length"></empty>
	</view>
</template>

<script>
import {empty} from '../empty'
import {mapGetters} from 'vuex'
import {formatTime} from '../../utils/index'

export default {
	name: 'message',
	props: {
		pullDown: {
			type:String,
			default: ''
		}
	},
	watch: {
		pullDown:{
			handler: 'pullDownRefresh'
		},
		messageList(val) {
			console.log(val)
		}
	},
	components: {
		empty
	},
	computed: {
		...mapGetters(['messageList'])
	},
	data() {
		return {
			white: true,
			desc: '/static/images/analyze/def_user.png',
			formatTimeFuc: formatTime,
			chatMsg: {}
		}
	},
	methods:{
		pullDownRefresh(val) {
			console.log(val)
			if (val === 'message') {
				this.$emit('update:pullDown','')
			}
		},
		handleChat(item) {
			const	userName = item.targetName
			const	userPhoto = item.targetPhoto
			const	userId = item.targetId
			this.$chatRecord(userId, item, item.type).messageShow()
			uni.navigateTo({
				url: `/pages/chat/index?userId=${userId}&userName=${userName}&userPhoto=${escape(userPhoto)}`
			})
		}
	}
}

</script>
<style lang='scss' scoped>
	.message-wrap {
		width: 100%;
		min-height: 100vh;
		background-color: #f0f0f0;
		.search-wrap{
			position: absolute;
			top: 0;
			left:0;
			width: 100%;
			height: 110upx;
			font-size: 30upx;
			color: #fff;
			font-weight: bold;
			display: flex;
			justify-content: flex-start;
			padding-top: 50upx;
			background-color: #4495EE;
			box-sizing: border-box;
			text-indent: 20upx;
			box-shadow: 0 4upx 4upx rgba(0,0,0,0.3);
			.search{
				width: 100%;
				padding: 0 20upx;
				box-sizing: border-box;
			}
		}
		.msg-list{
			width: 100%;
			height: calc(100vh - 110upx);
			background-color: #fff;
			padding-top: 110upx;
			.scrol-wrap{
				width: 100%;
				height: 100%;
			}
			.msg-item{
				display: flex;
				height: 148upx;
				padding-left: 20upx;
				box-sizing: border-box;
				align-items: center;
				position: relative;
				.un-read{
					position: absolute;
					top:24upx;
					left: 102upx;
					width:20upx;
					height:20upx;
					background:rgba(249,58,58,1);
					border-radius:50%;
				}
				.avatar {
					width:104upx;
					height:104upx;
					border-radius:50%;
					margin-right: 20upx;
				}
				.msg-info {
					flex: 1;
					height:100%;
					border-bottom: 1px solid #E1E1E1;
					padding-top: 28upx;
					box-sizing: border-box;
					min-width: 0;
					.name-wrap {
						display: flex;
						flex: 1;
						justify-content: space-between;
						.name{
							line-height: 50upx;
							font-size: 30upx;
							color: #333;
						}
						.time {
							line-height: 50upx;
							font-size: 30upx;
							color: #ccc;
							margin-right: 20upx;
						}
					}
					.msg{
						flex: 1;
						line-height: 46upx;
						min-width: 0;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						color:#999
					}
				}
			}
		}
	}
</style>
